<template>
	<view class="wrap">
		<view class="activity-status">{{orderDetail.activityStatus|activityStatus}}</view>
		<!-- 活动信息 -->
		<view class="box">
			<view class="basics">
				<text class="basics_title">订单编号:</text>
				<text class="basics_value">{{orderDetail.orderNo}}</text>
			</view>
			<view class="basics">
				<text class="basics_title">活动名称:</text>
				<text class="basics_value">{{orderDetail.activityName}}</text>
			</view>
			<view class="basics">
				<text class="basics_title">活动类型:</text>
				<text class="basics_value">{{orderDetail.activityType|activityType}}</text>
			</view>
			<view class="basics">
				<text class="basics_title">购买数量:</text>
				<text class="basics_value">{{orderDetail.number}}件</text>
			</view>
			<view class="basics">
				<text class="basics_title">购买时间:</text>
				<text class="basics_value">{{orderDetail.payTime}}</text>
			</view>
			<view class="basics">
				<text class="basics_title">合计金额:</text>
				<text class="basics_value">¥{{orderDetail.amount}}</text>
			</view>


			<!-- 退款信息 -->
			<view v-if="orderDetail.activityStatus == 5">
				<view class="basics">
					<text class="basics_title">退款时间:</text>
					<text class="basics_value">{{orderDetail.refundTime}}</text>
				</view>
				<view class="basics">
					<text class="basics_title">退款方式:</text>
					<text class="basics_value">{{orderDetail.refundWay|refundWay}}</text>
				</view>
				<view class="basics">
					<text class="basics_title">退款金额:</text>
					<text class="basics_value">¥{{orderDetail.refundAmount}}</text>
				</view>
			</view>


		</view>
		<!-- 商品 -->
		<view v-if="orderDetail.shoppVoList.length > 0">
			<view class="sectionTitle">商品</view>
			<view class="box" v-for="(item, index) in orderDetail.shoppVoList" :key="index">
				<view class="goods">
					<text class="goods_name">{{item.shoppingName}}</text>
					<text>--{{item.serviceType == 1 ? '实物' : '卡劵'}}</text>
					<text class="goods_num">数量: {{item.shoppingNum}}</text>
				</view>
			</view>
		</view>

		<!-- 使用门店 -->
		<view v-if="orderDetail.activityUnit.length > 0">
			<view class="sectionTitle">使用门店</view>
			<view class="box" v-for="(item, index) in orderDetail.activityUnit" :key="index">
				<view class="store">
					<view class="store_name">{{item.applicableUnit}}</view>
					<view class="store_address">{{item.unitAddress}}</view>
					<view class="store_other">
						<view class="distanceWrap">
							<text class="value">{{item.distance}}km</text>
							<text class="title">距离</text>
						</view>

						<view class="">
							<image @click="callPhone(item.unitPhone)" class="icon-image"
								src="../../static/common/callPhone.png" mode=""></image>
							<image @click="navi(item)" class="icon-image" src="../../static/common/location.png"
								mode=""></image>
						</view>
					</view>
				</view>
			</view>

		</view>

	</view>
</template>

<script>
	import {
		seckillOrderInfo
	} from '@/api/marketing-api.js'
	export default {
		data() {
			return {
				orderNo: '',
				lat: 0,
				lon: 0,
				orderDetail: {}
			}
		},
		onLoad(op) {
			this.orderNo = op.orderNo;
			this.getLocation();

		},
		methods: {
			//获取定位信息
			getLocation() {
				uni.getLocation({
					type: 'wgs84',
					success: (res => {
						this.lat = res.latitude;
						this.lon = res.longitude;
						this.getOrderDetail();
					})
				});
			},
			getOrderDetail() {
				let that = this;
				uni.showLoading({
					title: '加载中...'
				})
				seckillOrderInfo({
					bizNo: that.orderNo,
					lat: that.lat,
					lon: that.lon
				}).then(res => {
					uni.hideLoading();
					this.orderDetail = res.data;
				})
			},

			callPhone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone,
					success: (res) => {
						console.log('拨打电话成功');
					}
				})
			},
			navi(item) {
				uni.openLocation({ //​使用微信内置地图查看位置。
					latitude: item.unitLat, //要去的纬度-地址
					longitude: item.unitLon, //要去的经度-地址
					name: item.applicableUnit,
					address: item.unitAddress,
					success() {
						console.log('成功了');
					},
					fail(msg) {
						console.log(msg)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		padding: 0 24upx;
	}

	.activity-status {
		font-size: 32upx;
		font-weight: bold;
		color: $main-color;
		margin: 35upx 0;
	}

	.box {
		background-color: #fff;
		border-radius: 16upx;
		padding: 15upx 0;
		box-shadow: 0 0 0 NaNpx #000000;
		margin-bottom: 10upx;
	}

	.basics {
		padding: 10upx 25upx;

		&_title {
			font-size: 28upx;
			font-family: PingFang SC, PingFang SC-Medium;
			text-align: left;
			color: #999;
		}

		&_value {
			font-size: 28upx;
			font-family: PingFang SC, PingFang SC-Medium;
			text-align: left;
			color: #333;
			margin-left: 20upx;
		}
	}

	.sectionTitle {
		font-size: 28upx;
		font-family: PingFang SC, PingFang SC-Bold;
		font-weight: bold;
		color: #333;
		margin: 40upx 20upx 30upx 15upx;
	}

	.goods {
		padding: 10upx 25upx;
		position: relative;

		&_name {
			color: #333333;
			font-size: 26upx;
			font-weight: bold;
		}

		&_num {
			color: #333333;
			font-size: 26upx;
			font-weight: bold;
			// margin-left: 100upx;
			position: absolute;
			right: 100upx;
		}

		&_desc {
			margin-top: 20upx;
			font-size: 26upx;
			font-family: PingFang SC, PingFang SC-Medium;
			font-weight: bold;
			text-align: left;
			color: #999;
		}
	}

	.store {
		padding: 10upx 25upx;

		&_name {
			font-size: 26upx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: bold;
			color: #333;
			margin-top: 20upx;
		}

		&_address {
			font-size: 24upx;
			font-family: PingFang SC, PingFang SC-Medium;
			font-weight: bold;
			color: #999;
			margin-top: 20upx;
		}

		&_other {
			margin: 20upx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	}

	.distanceWrap {
		display: flex;
		flex-direction: column;
		align-items: center;

	}

	.title {
		font-size: 22upx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: bold;
		text-align: center;
		color: #999999;
	}

	.value {
		font-size: 26upx;
		font-family: PingFang SC, PingFang SC-Bold;
		font-weight: bold;
		text-align: left;
		color: #333333;
		margin-bottom: 20upx;
	}


	.icon-image {
		width: 34upx;
		height: 34upx;
		margin-left: 70upx;
	}
</style>
